<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.计算属性实现案例</title>
  </head>

  <body>
    <div id="app">
      <div>姓:<input type="text" v-model:value="firstName"></div>
      <div>名:<input type="text" v-model:value="lastName"></div>
      <div>姓名:{{fullName}}</div>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        firstName: '张',
        lastName: '三',
        fullName: "张-三"
      },
      methods: {

      },
      computed: {
        // fullName: {
        /* 
           计算属性什么时候被调用？
             1.初次渲染时会调用，
             2.当值发生变化时会调用
           */
        // get() {
        //   console.log("计算属性get被调用了");
        //   return this.firstName + this.lastName
        // },
        /* 
        计算属性get什么时候被调用?
          当方法被修改时
        */
        // set(value) {
        //   console.log("set被调用了", value);
        //   let arr = value.split('');
        //   this.firstName = arr[0];
        //   this.lastName = arr[1]
        // }
        // }
      },
      watch: {

        firstName: {
          handler(val) {
            /* 
              新需求：fullName在一秒钟之后再展示得到页面上
            */
            setTimeout(() => {
              console.log("firstName属性已改变");
              console.log(this)
              this.fullName = val + this.lastName
            }, 1000)
          }
        },
        lastName: {
          handler(val) {
            console.log("lastName属性已改变");
            setTimeout(() => {
              this.fullName = this.firstName + val
            }, 1000)
          }
        }
      }
    })
  </script>

</html>